import { Dialog } from "antd-mobile";
import { useCancelOrderMutation, useLazyOrderDetailQuery } from "@store/apiSlice/consultApiSlice";
import { useTypedDispatch } from "@store/index";
import { updateOrder } from "@store/slices/fastRecordSlice";

export default function CancelFastOrder({ id }: Props) {
  // 用于实现取消订单
  const [cancelOrderRequest] = useCancelOrderMutation();
  // 查询订单详情
  const [requestOrder] = useLazyOrderDetailQuery();
  // 获取 dispatch 方法
  const dispatch = useTypedDispatch();
  // 取消订单
  const cancelOrderHandler = async () => {
    // 和用户进行确认
    const confirm = await Dialog.confirm({
      content: "您真的要取消该订单吗",
      title: "温馨提示",
    });
    // 如果用户点击了取消, 阻止程序继续运行
    if (!confirm) return;
    // 用户点击了确定 执行取消订单操作
    await cancelOrderRequest(id);
    // 重新获取订单详情
    const response = await requestOrder(id).unwrap();
    // 更新订单状态
    dispatch(
      updateOrder({ id,
        changes: { ...response.data },
      })
    );
  };
  return <button onClick={cancelOrderHandler}>取消问诊</button>;
}